import { useState, useEffect } from 'react';
import { useTheme } from '@/hooks/useTheme';
import { Calendar, Clock, Heart, Award, ChevronRight, ArrowLeft, BarChart, Dumbbell, Users, CheckCircle } from 'lucide-react';
import { useNavigate } from 'react-router-dom';
import { toast } from 'sonner';

// 定义训练阶段类型
interface TrainingPhase {
  id: string;
  title: string;
  duration: string;
  focus: string;
  description: string;
  color: string;
  icon: JSX.Element;
}

// 定义训练周期类型
interface TrainingCycle {
  id: string;
  phaseId: string;
  cycleNumber: number;
  days: number[];
  theme: string;
  focus: string;
  trainingDays: TrainingDay[];
}

// 定义训练日类型
interface TrainingDay {
  id: string;
  dayNumber: number;
  type: 'aerobic' | 'strength' | 'activeRecovery' | 'rest';
  title: string;
  description: string;
  duration: string;
  exercises?: Exercise[];
  completed?: boolean;
}

// 定义训练动作类型
interface Exercise {
  id: string;
  name: string;
  sets: string;
  reps: string;
  intensity: string;
  rest: string;
  tips?: string;
}

// 训练阶段数据
const trainingPhases: TrainingPhase[] = [
  {
    id: 'phase1',
    title: '第一阶段：有氧基础',
    duration: '30天',
    focus: '有氧爬坡为主，建立基础体能',
    description: '这个阶段主要通过有氧爬坡训练提高心肺功能，增强下肢耐力，为后续力量训练打下基础。每周训练5天，休息2天。',
    color: 'from-blue-600 to-blue-400',
    icon: <Heart size={24} />
  },
  {
    id: 'phase2',
    title: '第二阶段：力量入门',
    duration: '30天',
    focus: '结合有氧与基础力量训练',
    description: '这个阶段开始引入基础力量训练，同时保持有氧训练。每周训练5-6天，包括2天有氧、3天力量和1天主动恢复。',
    color: 'from-green-600 to-green-400',
    icon: <Dumbbell size={24} />
  },
  {
    id: 'phase3',
    title: '第三阶段：综合提升',
    duration: '30天',
    focus: '提升训练强度，优化身体线条',
    description: '这个阶段提高训练强度和多样性，结合HIIT训练和复合力量动作，全面提升体能和塑造身材。每周训练6天，休息1天。',
    color: 'from-purple-600 to-purple-400',
    icon: <Users size={24} />
  }
];

// 训练周期数据
const trainingCycles: TrainingCycle[] = [
  // 第一阶段周期
  {
    id: 'cycle1',
    phaseId: 'phase1',
    cycleNumber: 1,
    days: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    theme: '基础适应期',
    focus: '有氧爬坡入门',
    trainingDays: [
      {
        id: 'day1',
        dayNumber: 1,
        type: 'aerobic',
        title: '有氧爬坡基础',
        description: '低强度有氧爬坡，适应运动节奏',
        duration: '20分钟',
        exercises: [
          {
            id: 'ex1',
            name: '坡度爬坡',
            sets: '1组',
            reps: '20分钟',
            intensity: '低强度（心率60-65%最大心率）',
            rest: '无',
            tips: '保持慢速，专注于姿势'
          }
        ]
      },
      {
        id: 'day2',
        dayNumber: 2,
        type: 'activeRecovery',
        title: '轻度有氧',
        description: '轻松散步或瑜伽，促进血液循环',
        duration: '15分钟'
      },
      {
        id: 'day3',
        dayNumber: 3,
        type: 'aerobic',
        title: '有氧爬坡进阶',
        description: '增加坡度，提高心肺挑战',
        duration: '25分钟',
        exercises: [
          {
            id: 'ex2',
            name: '可变坡度爬坡',
            sets: '1组',
            reps: '25分钟',
            intensity: '中等强度（心率65-70%最大心率）',
            rest: '无',
            tips: '每5分钟微调坡度'
          }
        ]
      },
      {
        id: 'day4',
        dayNumber: 4,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day5',
        dayNumber: 5,
        type: 'aerobic',
        title: '有氧爬坡持续',
        description: '保持稳定强度的有氧训练',
        duration: '30分钟',
        exercises: [
          {
            id: 'ex3',
            name: '稳态爬坡',
            sets: '1组',
            reps: '30分钟',
            intensity: '中等强度（心率65-70%最大心率）',
            rest: '无',
            tips: '保持一致的节奏'
          }
        ]
      },
      {
        id: 'day6',
        dayNumber: 6,
        type: 'activeRecovery',
        title: '拉伸与放松',
        description: '重点拉伸下肢肌肉群',
        duration: '15分钟'
      },
      {
        id: 'day7',
        dayNumber: 7,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day8',
        dayNumber: 8,
        type: 'aerobic',
        title: '有氧爬坡提升',
        description: '进一步增加训练时间和强度',
        duration: '35分钟',
        exercises: [
          {
            id: 'ex4',
            name: '长时爬坡',
            sets: '1组',
            reps: '35分钟',
            intensity: '中等强度（心率65-75%最大心率）',
            rest: '无',
            tips: '保持呼吸稳定'
          }
        ]
      },
      {
        id: 'day9',
        dayNumber: 9,
        type: 'activeRecovery',
        title: '轻度活动',
        description: '轻松瑜伽或散步',
        duration: '20分钟'
      },
      {
        id: 'day10',
        dayNumber: 10,
        type: 'aerobic',
        title: '周期测试',
        description: '评估前10天的训练成果',
        duration: '40分钟',
        exercises: [
          {
            id: 'ex5',
            name: '挑战爬坡',
            sets: '1组',
            reps: '40分钟',
            intensity: '中高强度（心率70-75%最大心率）',
            rest: '无',
            tips: '尽最大努力完成'
          }
        ]
      }
    ]
  },
  {
    id: 'cycle2',
    phaseId: 'phase1',
    cycleNumber: 2,
    days: [11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
    theme: '强度提升期',
    focus: '增加有氧训练强度',
    trainingDays: [
      {
        id: 'day11',
        dayNumber: 11,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day12',
        dayNumber: 12,
        type: 'aerobic',
        title: '间歇爬坡训练',
        description: '高低强度交替的间歇训练',
        duration: '30分钟',
        exercises: [
          {
            id: 'ex6',
            name: '爬坡间歇',
            sets: '10组',
            reps: '1分钟高强度+2分钟低强度',
            intensity: '高强度（心率80-85%最大心率）/低强度（心率60-65%最大心率）',
            rest: '无',
            tips: '高强度时增加坡度，低强度时降低坡度'
          }
        ]
      },
      {
        id: 'day13',
        dayNumber: 13,
        type: 'activeRecovery',
        title: '轻度拉伸',
        description: '全身肌肉放松和拉伸',
        duration: '15分钟'
      },
      {
        id: 'day14',
        dayNumber: 14,
        type: 'aerobic',
        title: '长时稳定爬坡',
        description: '长时间中等强度有氧训练',
        duration: '45分钟',
        exercises: [
          {
            id: 'ex7',
            name: '稳态爬坡',
            sets: '1组',
            reps: '45分钟',
            intensity: '中等强度（心率65-75%最大心率）',
            rest: '无',
            tips: '保持一致的节奏和呼吸'
          }
        ]
      },
      {
        id: 'day15',
        dayNumber: 15,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day16',
        dayNumber: 16,
        type: 'aerobic',
        title: '渐进式爬坡',
        description: '逐渐增加坡度的爬坡训练',
        duration: '35分钟',
        exercises: [
          {
            id: 'ex8',
            name: '渐进爬坡',
            sets: '1组',
            reps: '35分钟',
            intensity: '从低强度逐渐提升到中等强度',
            rest: '无',
            tips: '每5分钟增加1-2%坡度'
          }
        ]
      },
      {
        id: 'day17',
        dayNumber: 17,
        type: 'activeRecovery',
        title: '瑜伽放松',
        description: '专注于呼吸和柔韧性的瑜伽练习',
        duration: '20分钟'
      },
      {
        id: 'day18',
        dayNumber: 18,
        type: 'aerobic',
        title: '间歇爬坡进阶',
        description: '更具挑战性的间歇训练',
        duration: '30分钟',
        exercises: [
          {
            id: 'ex9',
            name: '高级爬坡间歇',
            sets: '8组',
            reps: '1.5分钟高强度+1.5分钟低强度',
            intensity: '高强度（心率80-85%最大心率）/低强度（心率60-65%最大心率）',
            rest: '无',
            tips: '高强度时尝试更高的坡度'
          }
        ]
      },
      {
        id: 'day19',
        dayNumber: 19,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day20',
        dayNumber: 20,
        type: 'aerobic',
        title: '周期测试',
        description: '评估第二周期的训练成果',
        duration: '50分钟',
        exercises: [
          {
            id: 'ex10',
            name: '耐力挑战',
            sets: '1组',
            reps: '50分钟',
            intensity: '中等强度（心率70-75%最大心率）',
            rest: '无',
            tips: '保持稳定，挑战自我极限'
          }
        ]
      }
    ]
  },
  {
    id: 'cycle3',
    phaseId: 'phase1',
    cycleNumber: 3,
    days: [21, 22, 23, 24, 25, 26, 27, 28, 29, 30],
    theme: '耐力巩固期',
    focus: '巩固有氧基础，提高耐力',
    trainingDays: [
      {
        id: 'day21',
        dayNumber: 21,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day22',
        dayNumber: 22,
        type: 'aerobic',
        title: '混合有氧训练',
        description: '结合爬坡和其他有氧方式',
        duration: '40分钟',
        exercises: [
          {
            id: 'ex11',
            name: '有氧混合',
            sets: '1组',
            reps: '20分钟爬坡+20分钟其他有氧运动',
            intensity: '中等强度',
            rest: '无',
            tips: '可以选择慢跑、快走或骑自行车'
          }
        ]
      },
      {
        id: 'day23',
        dayNumber: 23,
        type: 'activeRecovery',
        title: '轻量活动',
        description: '轻松散步或伸展运动',
        duration: '15分钟'
      },
      {
        id: 'day24',
        dayNumber: 24,
        type: 'aerobic',
        title: '高强度间歇爬坡',
        description: '短时间高强度间歇训练',
        duration: '25分钟',
        exercises: [
          {
            id: 'ex12',
            name: 'HIIT爬坡',
            sets: '10组',
            reps: '30秒冲刺+1分钟恢复',
            intensity: '冲刺（心率85-90%最大心率）/恢复（心率60-65%最大心率）',
            rest: '无',
            tips: '冲刺时用最大能力，恢复时充分放松'
          }
        ]
      },
      {
        id: 'day25',
        dayNumber: 25,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day26',
        dayNumber: 26,
        type: 'aerobic',
        title: '长时间爬坡',
        description: '挑战最长训练时间',
        duration: '60分钟',
        exercises: [
          {
            id: 'ex13',
            name: '超长爬坡',
            sets: '1组',
            reps: '60分钟',
            intensity: '中等强度（心率65-75%最大心率）',
            rest: '无',
            tips: '可以适当补充水分和电解质'
          }
        ]
      },
      {
        id: 'day27',
        dayNumber: 27,
        type: 'activeRecovery',
        title: '全身拉伸',
        description: '重点拉伸所有主要肌肉群',
        duration: '20分钟'
      },
      {
        id: 'day28',
        dayNumber: 28,
        type: 'aerobic',
        title: '变速爬坡',
        description: '不断变化速度和坡度的训练',
        duration: '40分钟',
        exercises: [
          {
            id: 'ex14',
            name: '变速训练',
            sets: '1组',
            reps: '40分钟',
            intensity: '不断变化（5-10分钟变换一次速度和坡度）',
            rest: '无',
            tips: '保持趣味性，避免单调'
          }
        ]
      },
      {
        id: 'day29',
        dayNumber: 29,
        type: 'rest',
        title: '休息日',
        description: '完全休息，准备最后一天的测试',
        duration: '0分钟'
      },
      {
        id: 'day30',
        dayNumber: 30,
        type: 'aerobic',
        title: '第一阶段测试',
        description: '测试第一阶段训练成果',
        duration: '60分钟',
        exercises: [
          {
            id: 'ex15',
            name: '最终挑战',
            sets: '1组',
            reps: '60分钟',
            intensity: '中等强度（心率70-75%最大心率）',
            rest: '无',
            tips: '全力以赴，感受一个月的进步'
          }
        ]
      }
    ]
  },
  // 第二阶段周期
  {
    id: 'cycle4',
    phaseId: 'phase2',
    cycleNumber: 4,
    days: [31, 32, 33, 34, 35, 36, 37, 38, 39, 40],
    theme: '力量启蒙期',
    focus: '基础力量训练入门',
    trainingDays: [
      {
        id: 'day31',
        dayNumber: 31,
        type: 'strength',
        title: '下肢力量基础',
        description: '学习基础下肢力量动作',
        duration: '30分钟',
        exercises: [
          {
            id: 'ex16',
            name: '自重深蹲',
            sets: '3组',
            reps: '12-15次',
            intensity: '低强度',
            rest: '60秒',
            tips: '保持背部挺直，膝盖与脚尖方向一致'
          },
          {
            id: 'ex17',
            name: '箭步蹲',
            sets: '3组',
            reps: '10-12次/侧',
            intensity: '低强度',
            rest: '60秒',
            tips: '保持上半身直立，前膝盖不超过脚尖'
          },
          {
            id: 'ex18',
            name: '提踵',
            sets: '3组',
            reps: '15-20次',
            intensity: '低强度',
            rest: '45秒',
            tips: '可以扶住固定物保持平衡'
          }
        ]
      },
      {
        id: 'day32',
        dayNumber: 32,
        type: 'aerobic',
        title: '有氧保持',
        description: '保持有氧能力的爬坡训练',
        duration: '30分钟',
        exercises: [
          {
            id: 'ex19',
            name: '轻松爬坡',
            sets: '1组',
            reps: '30分钟',
            intensity: '中等强度（心率65-70%最大心率）',
            rest: '无',
            tips: '保持轻松的节奏'
          }
        ]
      },
      {
        id: 'day33',
        dayNumber: 33,
        type: 'strength',
        title: '上肢力量基础',
        description: '学习基础上肢力量动作',
        duration: '30分钟',
        exercises: [
          {
            id: 'ex20',
            name: '俯卧撑',
            sets: '3组',
            reps: '8-12次（可跪姿）',
            intensity: '低强度',
            rest: '60秒',
            tips: '保持身体成一条直线，避免塌腰'
          },
          {
            id: 'ex21',
            name: '哑铃划船（可用水瓶替代）',
            sets: '3组',
            reps: '10-12次/侧',
            intensity: '低强度',
            rest: '60秒',
            tips: '保持背部挺直，避免旋转'
          },
          {
            id: 'ex22',
            name: '哑铃肩推（可用水瓶替代）',
            sets: '3组',
            reps: '10-12次',
            intensity: '低强度',
            rest: '60秒',
            tips: '保持核心收紧，避免腰部过度伸展'
          }
        ]
      },
      {
        id: 'day34',
        dayNumber: 34,
        type: 'activeRecovery',
        title: '拉伸与放松',
        description: '重点拉伸今天训练的肌肉群',
        duration: '20分钟'
      },
      {
        id: 'day35',
        dayNumber: 35,
        type: 'strength',
        title: '核心力量训练',
        description: '学习基础核心训练动作',
        duration: '25分钟',
        exercises: [
          {
            id: 'ex23',
            name: '平板支撑',
            sets: '3组',
            reps: '30-60秒',
            intensity: '低强度',
            rest: '45秒',
            tips: '保持身体成一条直线，核心收紧'
          },
          {
            id: 'ex24',
            name: '仰卧起坐',
            sets: '3组',
            reps: '12-15次',
            intensity: '低强度',
            rest: '45秒',
            tips: '避免拉扯颈部，用腹部力量起身'
          },
          {
            id: 'ex25',
            name: '鸟狗式',
            sets: '3组',
            reps: '10-12次/侧',
            intensity: '低强度',
            rest: '45秒',
            tips: '保持核心收紧，避免身体摇晃'
          }
        ]
      },
      {
        id: 'day36',
        dayNumber: 36,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day37',
        dayNumber: 37,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day38',
        dayNumber: 38,
        type: 'strength',
        title: '下肢力量进阶',
        description: '增加下肢力量训练难度',
        duration: '35分钟',
        exercises: [
          {
            id: 'ex26',
            name: '自重深蹲（慢速）',
            sets: '3组',
            reps: '10-12次',
            intensity: '中等强度',
            rest: '60秒',
            tips: '放慢动作速度，加强肌肉控制'
          },
          {
            id: 'ex27',
            name: '保加利亚分腿蹲（可用椅子辅助）',
            sets: '3组',
            reps: '8-10次/侧',
            intensity: '中等强度',
            rest: '60秒',
            tips: '保持上半身直立，感受后侧肌肉拉伸'
          },
          {
            id: 'ex28',
            name: '靠墙静蹲',
            sets: '3组',
            reps: '30-45秒',
            intensity: '中等强度',
            rest: '60秒',
            tips: '保持膝盖与脚尖方向一致'
          }
        ]
      },
      {
        id: 'day39',
        dayNumber: 39,
        type: 'aerobic',
        title: '有氧间歇',
        description: '短时间高强度有氧训练',
        duration: '25分钟',
        exercises: [
          {
            id: 'ex29',
            name: '爬坡间歇',
            sets: '8组',
            reps: '1分钟高强度+2分钟低强度',
            intensity: '高强度（心率80-85%最大心率）/低强度（心率60-65%最大心率）',
            rest: '无',
            tips: '快速提升心率，然后充分恢复'
          }
        ]
      },
      {
        id: 'day40',
        dayNumber: 40,
        type: 'strength',
        title: '全身力量整合',
        description: '综合前几天学习的力量动作',
        duration: '35分钟',
        exercises: [
          {
            id: 'ex30',
            name: '自重深蹲',
            sets: '3组',
            reps: '10-12次',
            intensity: '中等强度',
            rest: '60秒',
            tips: '保持正确姿势'
          },
          {
            id: 'ex31',
            name: '俯卧撑',
            sets: '3组',
            reps: '8-10次',
            intensity: '中等强度',
            rest: '60秒',
            tips: '尽量降低身体，增加难度'
          },
          {
            id: 'ex32',
            name: '平板支撑',
            sets: '3组',
            reps: '45-60秒',
            intensity: '中等强度',
            rest: '60秒',
            tips: '保持稳定'
          }
        ]
      }
    ]
  },
  // 第二阶段剩余周期
  {
    id: 'cycle5',
    phaseId: 'phase2',
    cycleNumber: 5,
    days: [41, 42, 43, 44, 45, 46, 47, 48, 49, 50],
    theme: '力量增长期',
    focus: '增加力量训练强度',
    trainingDays: [
      {
        id: 'day41',
        dayNumber: 41,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day42',
        dayNumber: 42,
        type: 'strength',
        title: '上肢力量进阶',
        description: '提高上肢力量训练难度',
        duration: '35分钟',
        exercises: [
          {
            id: 'ex33',
            name: '上斜俯卧撑',
            sets: '3组',
            reps: '10-12次',
            intensity: '中等强度',
            rest: '60秒',
            tips: '将脚放在台阶或椅子上增加难度'
          },
          {
            id: 'ex34',
            name: '哑铃划船（加重）',
            sets: '3组',
            reps: '10-12次/侧',
            intensity: '中等强度',
            rest: '60秒',
            tips: '保持背部挺直，专注于背部发力'
          },
          {
            id: 'ex35',
            name: '哑铃侧平举',
            sets: '3组',
            reps: '12-15次',
            intensity: '中等强度',
            rest: '45秒',
            tips: '保持手臂微屈，不要摆动身体'
          }
        ]
      },
      {
        id: 'day43',
        dayNumber: 43,
        type: 'aerobic',
        title: '有氧稳态训练',
        description: '保持稳定强度的有氧训练',
        duration: '35分钟',
        exercises: [
          {
            id: 'ex36',
            name: '稳态爬坡',
            sets: '1组',
            reps: '35分钟',
            intensity: '中等强度（心率70-75%最大心率）',
            rest: '无',
            tips: '保持一致的节奏和呼吸'
          }
        ]
      },
      {
        id: 'day44',
        dayNumber: 44,
        type: 'strength',
        title: '核心力量提升',
        description: '增强核心肌群力量',
        duration: '30分钟',
        exercises: [
          {
            id: 'ex37',
            name: '平板支撑（加重）',
            sets: '3组',
            reps: '45-60秒',
            intensity: '中等强度',
            rest: '45秒',
            tips: '可以在背上放置书本增加重量'
          },
          {
            id: 'ex38',
            name: '仰卧举腿',
            sets: '3组',
            reps: '12-15次',
            intensity: '中等强度',
            rest: '45秒',
            tips: '保持腿部伸直，缓慢下放'
          },
          {
            id: 'ex39',
            name: '俄罗斯转体（加重）',
            sets: '3组',
            reps: '15-20次/侧',
            intensity: '中等强度',
            rest: '45秒',
            tips: '可以双手持重物增加难度'
          }
        ]
      },
      {
        id: 'day45',
        dayNumber: 45,
        type: 'activeRecovery',
        title: '拉伸与放松',
        description: '全面拉伸放松所有训练肌群',
        duration: '20分钟'
      },
      {
        id: 'day46',
        dayNumber: 46,
        type: 'strength',
        title: '下肢力量强化',
        description: '进一步提高下肢力量训练难度',
        duration: '40分钟',
        exercises: [
          {
            id: 'ex40',
            name: '自重深蹲跳',
            sets: '3组',
            reps: '8-10次',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '落地时膝盖微屈，缓冲冲击力'
          },
          {
            id: 'ex41',
            name: '保加利亚分腿蹲（加重）',
            sets: '3组',
            reps: '8-10次/侧',
            intensity: '中等强度',
            rest: '60秒',
            tips: '可以手持哑铃增加重量'
          },
          {
            id: 'ex42',
            name: '单腿硬拉',
            sets: '3组',
            reps: '8-10次/侧',
            intensity: '中等强度',
            rest: '60秒',
            tips: '保持平衡，感受腘绳肌拉伸'
          }
        ]
      },
      {
        id: 'day47',
        dayNumber: 47,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day48',
        dayNumber: 48,
        type: 'aerobic',
        title: '有氧间歇进阶',
        description: '更具挑战性的间歇训练',
        duration: '30分钟',
        exercises: [
          {
            id: 'ex43',
            name: '高级间歇爬坡',
            sets: '10组',
            reps: '45秒高强度+30秒低强度',
            intensity: '高强度（心率85-90%最大心率）/低强度（心率60-65%最大心率）',
            rest: '无',
            tips: '高强度时尽可能提高坡度和速度'
          }
        ]
      },
      {
        id: 'day49',
        dayNumber: 49,
        type: 'strength',
        title: '全身力量整合',
        description: '综合前几天学习的力量动作',
        duration: '40分钟',
        exercises: [
          {
            id: 'ex44',
            name: '自重深蹲',
            sets: '3组',
            reps: '10-12次',
            intensity: '中等强度',
            rest: '60秒',
            tips: '保持正确姿势'
          },
          {
            id: 'ex45',
            name: '俯卧撑',
            sets: '3组',
            reps: '10-12次',
            intensity: '中等强度',
            rest: '60秒',
            tips: '尽量降低身体，增加难度'
          },
          {
            id: 'ex46',
            name: '哑铃划船',
            sets: '3组',
            reps: '10-12次/侧',
            intensity: '中等强度',
            rest: '60秒',
            tips: '保持背部挺直'
          },
          {
            id: 'ex47',
            name: '平板支撑',
            sets: '3组',
            reps: '60秒',
            intensity: '中等强度',
            rest: '60秒',
            tips: '保持稳定'
          }
        ]
      },
      {
        id: 'day50',
        dayNumber: 50,
        type: 'activeRecovery',
        title: '轻松瑜伽',
        description: '通过瑜伽放松身心，促进恢复',
        duration: '25分钟'
      }
    ]
  },
  {
    id: 'cycle6',
    phaseId: 'phase2',
    cycleNumber: 6,
    days: [51, 52, 53, 54, 55, 56, 57, 58, 59, 60],
    theme: '力量巩固期',
    focus: '巩固力量训练成果',
    trainingDays: [
      {
        id: 'day51',
        dayNumber: 51,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day52',
        dayNumber: 52,
        type: 'strength',
        title: '上肢力量突破',
        description: '尝试突破上肢力量极限',
        duration: '40分钟',
        exercises: [
          {
            id: 'ex48',
            name: '宽距俯卧撑',
            sets: '4组',
            reps: '力竭',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '双手间距大于肩宽，重点锻炼胸肌'
          },
          {
            id: 'ex49',
            name: '哑铃肩推（加重）',
            sets: '3组',
            reps: '10-12次',
            intensity: '中等强度',
            rest: '60秒',
            tips: '保持核心收紧，避免腰部过度伸展'
          },
          {
            id: 'ex50',
            name: '绳索三头下压',
            sets: '3组',
            reps: '12-15次',
            intensity: '中等强度',
            rest: '45秒',
            tips: '保持手臂靠近身体两侧'
          }
        ]
      },
      {
        id: 'day53',
        dayNumber: 53,
        type: 'aerobic',
        title: '长时间有氧',
        description: '挑战更长时间的有氧训练',
        duration: '50分钟',
        exercises: [
          {
            id: 'ex51',
            name: '长时爬坡',
            sets: '1组',
            reps: '50分钟',
            intensity: '中等强度（心率65-75%最大心率）',
            rest: '无',
            tips: '可以适当补充水分'
          }
        ]
      },
      {
        id: 'day54',
        dayNumber: 54,
        type: 'strength',
        title: '下肢力量突破',
        description: '尝试突破下肢力量极限',
        duration: '40分钟',
        exercises: [
          {
            id: 'ex52',
            name: '相扑深蹲',
            sets: '3组',
            reps: '10-12次',
            intensity: '中等强度',
            rest: '90秒',
            tips: '双脚间距更宽，脚尖外展角度更大'
          },
          {
            id: 'ex53',
            name: '跳箱训练',
            sets: '3组',
            reps: '8-10次',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '选择合适高度的箱子，确保落地稳定'
          },
          {
            id: 'ex54',
            name: '腿弯举（用弹力带模拟）',
            sets: '3组',
            reps: '12-15次',
            intensity: '中等强度',
            rest: '45秒',
            tips: '可以使用弹力带或毛巾固定在脚上增加阻力'
          }
        ]
      },
      {
        id: 'day55',
        dayNumber: 55,
        type: 'activeRecovery',
        title: '拉伸与放松',
        description: '重点拉伸下肢和上肢肌肉群',
        duration: '20分钟'
      },
      {
        id: 'day56',
        dayNumber: 56,
        type: 'strength',
        title: '核心力量突破',
        description: '尝试突破核心力量极限',
        duration: '35分钟',
        exercises: [
          {
            id: 'ex55',
            name: '侧平板支撑（加重）',
            sets: '3组',
            reps: '45秒/侧',
            intensity: '中等强度',
            rest: '45秒',
            tips: '可以在髋部放置重物增加难度'
          },
          {
            id: 'ex56',
            name: '悬垂举腿（模拟）',
            sets: '3组',
            reps: '10-12次',
            intensity: '中等强度',
            rest: '60秒',
            tips: '可以使用门框或椅子模拟悬垂姿势'
          },
          {
            id: 'ex57',
            name: '登山跑',
            sets: '3组',
            reps: '45秒',
            intensity: '中等至高强度',
            rest: '45秒',
            tips: '保持身体稳定，快速交替提膝'
          }
        ]
      },
      {
        id: 'day57',
        dayNumber: 57,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day58',
        dayNumber: 58,
        type: 'aerobic',
        title: '有氧间歇挑战',
        description: '终极有氧间歇挑战',
        duration: '30分钟',
        exercises: [
          {
            id: 'ex58',
            name: 'HIIT爬坡',
            sets: '12组',
            reps: '30秒冲刺+30秒恢复',
            intensity: '冲刺（心率85-90%最大心率）/恢复（心率60-65%最大心率）',
            rest: '无',
            tips: '全力以赴，挑战自我极限'
          }
        ]
      },
      {
        id: 'day59',
        dayNumber: 59,
        type: 'strength',
        title: '全身力量整合',
        description: '综合所有力量动作，进行全身训练',
        duration: '45分钟',
        exercises: [
          {
            id: 'ex59',
            name: '深蹲',
            sets: '4组',
            reps: '8-10次',
            intensity: '中等强度',
            rest: '90秒',
            tips: '保持正确姿势'
          },
          {
            id: 'ex60',
            name: '俯卧撑',
            sets: '4组',
            reps: '10-12次',
            intensity: '中等强度',
            rest: '60秒',
            tips: '尽量降低身体'
          },
          {
            id: 'ex61',
            name: '哑铃划船',
            sets: '4组',
            reps: '10-12次/侧',
            intensity: '中等强度',
            rest: '60秒',
            tips: '保持背部挺直'
          },
          {
            id: 'ex62',
            name: '平板支撑',
            sets: '3组',
            reps: '90秒',
            intensity: '中等强度',
            rest: '60秒',
            tips: '保持稳定'
          }
        ]
      },
      {
        id: 'day60',
        dayNumber: 60,
        type: 'activeRecovery',
        title: '第二阶段测试',
        description: '测试第二阶段训练成果',
        duration: '40分钟',
        exercises: [
          {
            id: 'ex63',
            name: '综合训练',
            sets: '1组',
            reps: '40分钟',
            intensity: '中等强度',
            rest: '无',
            tips: '结合有氧和力量动作，感受两个月的进步'
          }
        ]
      }
    ]
  },
  // 第三阶段周期
  {
    id: 'cycle7',
    phaseId: 'phase3',
    cycleNumber: 7,
    days: [61, 62, 63, 64, 65, 66, 67, 68, 69, 70],
    theme: '综合提升期',
    focus: '结合HIIT和复合力量训练',
    trainingDays: [
      {
        id: 'day61',
        dayNumber: 61,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day62',
        dayNumber: 62,
        type: 'strength',
        title: '复合动作训练',
        description: '专注于复合动作，全面提升力量',
        duration: '45分钟',
        exercises: [
          {
            id: 'ex64',
            name: '弓步深蹲',
            sets: '4组',
            reps: '10-12次/侧',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '保持上半身直立，前膝盖不超过脚尖'
          },
          {
            id: 'ex65',
            name: '哑铃肩推',
            sets: '4组',
            reps: '8-10次',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '可以选择站姿增加核心挑战'
          },
          {
            id: 'ex66',
            name: '单臂哑铃划船',
            sets: '4组',
            reps: '10-12次/侧',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '保持身体稳定，避免摇晃'
          }
        ]
      },
      {
        id: 'day63',
        dayNumber: 63,
        type: 'aerobic',
        title: 'HIIT训练',
        description: '高强度间歇训练，提高代谢水平',
        duration: '25分钟',
        exercises: [
          {
            id: 'ex67',
            name: 'HIIT爬坡',
            sets: '10组',
            reps: '20秒冲刺+40秒恢复',
            intensity: '冲刺（心率85-90%最大心率）/恢复（心率60-65%最大心率）',
            rest: '无',
            tips: '冲刺时用最大能力'
          }
        ]
      },
      {
        id: 'day64',
        dayNumber: 64,
        type: 'strength',
        title: '核心与全身稳定',
        description: '增强核心力量和全身稳定性',
        duration: '40分钟',
        exercises: [
          {
            id: 'ex68',
            name: '单腿深蹲',
            sets: '3组',
            reps: '8-10次/侧',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '可以使用椅子辅助保持平衡'
          },
          {
            id: 'ex69',
            name: '平板支撑变式',
            sets: '3组',
            reps: '45秒',
            intensity: '中等强度',
            rest: '45秒',
            tips: '尝试抬手或抬腿增加难度'
          },
          {
            id: 'ex70',
            name: '鸟狗式（加重）',
            sets: '3组',
            reps: '10-12次/侧',
            intensity: '中等强度',
            rest: '45秒',
            tips: '可以在手中握重物增加难度'
          }
        ]
      },
      {
        id: 'day65',
        dayNumber: 65,
        type: 'activeRecovery',
        title: '拉伸与放松',
        description: '全面拉伸放松，重点关注紧张部位',
        duration: '20分钟'
      },
      {
        id: 'day66',
        dayNumber: 66,
        type: 'strength',
        title: '爆发力训练',
        description: '提高肌肉爆发力和速度',
        duration: '40分钟',
        exercises: [
          {
            id: 'ex71',
            name: '深蹲跳',
            sets: '4组',
            reps: '8-10次',
            intensity: '高强度',
            rest: '2分钟',
            tips: '尽可能跳得高，落地时缓冲'
          },
          {
            id: 'ex72',
            name: '俯卧撑跳',
            sets: '3组',
            reps: '8-10次',
            intensity: '高强度',
            rest: '90秒',
            tips: '从俯卧撑姿势快速跳起，双手离开地面'
          },
          {
            id: 'ex73',
            name: '快速高抬腿',
            sets: '3组',
            reps: '30秒',
            intensity: '高强度',
            rest: '60秒',
            tips: '尽可能快速抬膝，保持身体稳定'
          }
        ]
      },
      {
        id: 'day67',
        dayNumber: 67,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day68',
        dayNumber: 68,
        type: 'aerobic',
        title: '长时间有氧',
        description: '挑战最长时间有氧训练',
        duration: '60分钟',
        exercises: [
          {
            id: 'ex74',
            name: '超长爬坡',
            sets: '1组',
            reps: '60分钟',
            intensity: '中等强度（心率65-75%最大心率）',
            rest: '无',
            tips: '保持稳定，注意补充水分'
          }
        ]
      },
      {
        id: 'day69',
        dayNumber: 69,
        type: 'strength',
        title: '全身力量整合',
        description: '综合所有力量动作，进行全身训练',
        duration: '45分钟',
        exercises: [
          {
            id: 'ex75',
            name: '深蹲',
            sets: '4组',
            reps: '8-10次',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '保持正确姿势'
          },
          {
            id: 'ex76',
            name: '俯卧撑',
            sets: '4组',
            reps: '10-12次',
            intensity: '中等至高强度',
            rest: '60秒',
            tips: '尽量降低身体'
          },
          {
            id: 'ex77',
            name: '哑铃划船',
            sets: '4组',
            reps: '10-12次/侧',
            intensity: '中等至高强度',
            rest: '60秒',
            tips: '保持背部挺直'
          },
          {
            id: 'ex78',
            name: '平板支撑',
            sets: '3组',
            reps: '120秒',
            intensity: '中等至高强度',
            rest: '60秒',
            tips: '保持稳定'
          }
        ]
      },
      {
        id: 'day70',
        dayNumber: 70,
        type: 'activeRecovery',
        title: '轻松活动',
        description: '通过轻松的活动促进恢复',
        duration: '20分钟'
      }
    ]
  },
  {
    id: 'cycle8',
    phaseId: 'phase3',
    cycleNumber: 8,
    days: [71, 72, 73, 74, 75, 76, 77, 78, 79, 80],
    theme: '高级训练期',
    focus: '高级力量和有氧训练',
    trainingDays: [
      {
        id: 'day71',
        dayNumber: 71,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day72',
        dayNumber: 72,
        type: 'strength',
        title: '超级组训练',
        description: '使用超级组技术提高训练强度',
        duration: '45分钟',
        exercises: [
          {
            id: 'ex79',
            name: '深蹲 + 箭步蹲超级组',
            sets: '4组',
            reps: '10次深蹲 + 10次箭步蹲/侧',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '两组动作之间不休息，完成后休息'
          },
          {
            id: 'ex80',
            name: '俯卧撑 + 哑铃肩推超级组',
            sets: '4组',
            reps: '10次俯卧撑 + 10次哑铃肩推',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '两组动作之间不休息，完成后休息'
          }
        ]
      },
      {
        id: 'day73',
        dayNumber: 73,
        type: 'aerobic',
        title: 'HIIT进阶',
        description: '更具挑战性的HIIT训练',
        duration: '25分钟',
        exercises: [
          {
            id: 'ex81',
            name: '高级HIIT爬坡',
            sets: '12组',
            reps: '20秒冲刺+20秒恢复',
            intensity: '冲刺（心率85-90%最大心率）/恢复（心率60-65%最大心率）',
            rest: '无',
            tips: '冲刺时用最大能力，恢复时尽量放松'
          }
        ]
      },
      {
        id: 'day74',
        dayNumber: 74,
        type: 'strength',
        title: '核心力量挑战',
        description: '极限挑战核心力量',
        duration: '35分钟',
        exercises: [
          {
            id: 'ex82',
            name: '平板支撑变式循环',
            sets: '3组',
            reps: '60秒标准平板 + 30秒侧平板/侧 + 30秒负重平板',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '保持核心收紧，避免塌腰'
          },
          {
            id: 'ex83',
            name: '悬垂举腿（模拟）',
            sets: '3组',
            reps: '12-15次',
            intensity: '中等强度',
            rest: '60秒',
            tips: '可以使用门框或椅子模拟悬垂姿势'
          },
          {
            id: 'ex84',
            name: '登山跑',
            sets: '3组',
            reps: '60秒',
            intensity: '高强度',
            rest: '45秒',
            tips: '尽可能快速提膝'
          }
        ]
      },
      {
        id: 'day75',
        dayNumber: 75,
        type: 'activeRecovery',
        title: '拉伸与恢复',
        description: '重点拉伸所有训练肌群',
        duration: '25分钟'
      },
      {
        id: 'day76',
        dayNumber: 76,
        type: 'strength',
        title: '单侧力量训练',
        description: '专注于单侧力量训练，平衡两侧肌肉',
        duration: '40分钟',
        exercises: [
          {
            id: 'ex85',
            name: '单腿深蹲',
            sets: '4组',
            reps: '8-10次/侧',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '尽量不借助辅助物保持平衡'
          },
          {
            id: 'ex86',
            name: '单臂哑铃肩推',
            sets: '4组',
            reps: '10-12次/侧',
            intensity: '中等至高强度',
            rest: '60秒',
            tips: '保持核心收紧，避免身体摇晃'
          },
          {
            id: 'ex87',
            name: '单臂哑铃划船',
            sets: '4组',
            reps: '10-12次/侧',
            intensity: '中等至高强度',
            rest: '60秒',
            tips: '保持背部挺直'
          }
        ]
      },
      {
        id: 'day77',
        dayNumber: 77,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day78',
        dayNumber: 78,
        type: 'aerobic',
        title: '长时间有氧间歇',
        description: '结合长时间有氧和间歇训练',
        duration: '45分钟',
        exercises: [
          {
            id: 'ex88',
            name: '长时间歇爬坡',
            sets: '5组',
            reps: '5分钟中等强度 + 2分钟高强度',
            intensity: '中等强度（心率65-70%最大心率）/高强度（心率80-85%最大心率）',
            rest: '无',
            tips: '保持稳定，挑战自我'
          }
        ]
      },
      {
        id: 'day79',
        dayNumber: 79,
        type: 'strength',
        title: '全身力量整合',
        description: '综合所有力量动作，进行全身训练',
        duration: '45分钟',
        exercises: [
          {
            id: 'ex89',
            name: '深蹲',
            sets: '4组',
            reps: '8-10次',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '保持正确姿势'
          },
          {
            id: 'ex90',
            name: '俯卧撑',
            sets: '4组',
            reps: '10-12次',
            intensity: '中等至高强度',
            rest: '60秒',
            tips: '尽量降低身体'
          },
          {
            id: 'ex91',
            name: '哑铃划船',
            sets: '4组',
            reps: '10-12次/侧',
            intensity: '中等至高强度',
            rest: '60秒',
            tips: '保持背部挺直'
          },
          {
            id: 'ex92',
            name: '平板支撑',
            sets: '3组',
            reps: '150秒',
            intensity: '中等至高强度',
            rest: '60秒',
            tips: '保持稳定'
          }
        ]
      },
      {
        id: 'day80',
        dayNumber: 80,
        type: 'activeRecovery',
        title: '轻松瑜伽',
        description: '通过瑜伽放松身心，促进恢复',
        duration: '30分钟'
      }
    ]
  },
  {
    id: 'cycle9',
    phaseId: 'phase3',
    cycleNumber: 9,
    days: [81, 82, 83, 84, 85, 86, 87, 88, 89, 90],
    theme: '最终提升期',
    focus: '强化训练成果，塑造完美体型',
    trainingDays: [
      {
        id: 'day81',
        dayNumber: 81,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day82',
        dayNumber: 82,
        type: 'strength',
        title: '极限力量挑战',
        description: '尝试突破力量极限',
        duration: '45分钟',
        exercises: [
          {
            id: 'ex93',
            name: '深蹲（最大重量的80%）',
            sets: '4组',
            reps: '6-8次',
            intensity: '高强度',
            rest: '2分钟',
            tips: '确保有人保护，动作标准'
          },
          {
            id: 'ex94',
            name: '俯卧撑变式',
            sets: '4组',
            reps: '力竭',
            intensity: '高强度',
            rest: '90秒',
            tips: '可以尝试钻石俯卧撑或负重俯卧撑'
          }
        ]
      },
      {
        id: 'day83',
        dayNumber: 83,
        type: 'aerobic',
        title: 'HIIT终极挑战',
        description: '终极HIIT训练挑战',
        duration: '30分钟',
        exercises: [
          {
            id: 'ex95',
            name: 'HIIT终极爬坡',
            sets: '15组',
            reps: '20秒冲刺+10秒恢复',
            intensity: '冲刺（心率85-95%最大心率）/恢复（心率60-65%最大心率）',
            rest: '无',
            tips: '全力以赴，挑战自我极限'
          }
        ]
      },
      {
        id: 'day84',
        dayNumber: 84,
        type: 'strength',
        title: '核心与全身稳定',
        description: '增强核心力量和全身稳定性',
        duration: '40分钟',
        exercises: [
          {
            id: 'ex96',
            name: '单腿深蹲',
            sets: '4组',
            reps: '8-10次/侧',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '尽量不借助辅助物保持平衡'
          },
          {
            id: 'ex97',
            name: '平板支撑变式循环',
            sets: '3组',
            reps: '60秒标准平板 + 45秒侧平板/侧 + 45秒负重平板',
            intensity: '中等至高强度',
            rest: '90秒',
            tips: '保持核心收紧，避免塌腰'
          },
          {
            id: 'ex98',
            name: '鸟狗式（加重）',
            sets: '3组',
            reps: '12-15次/侧',
            intensity: '中等强度',
            rest: '45秒',
            tips: '可以在手中握重物增加难度'
          }
        ]
      },
      {
        id: 'day85',
        dayNumber: 85,
        type: 'activeRecovery',
        title: '拉伸与放松',
        description: '全面拉伸放松，重点关注紧张部位',
        duration: '30分钟'
      },
      {
        id: 'day86',
        dayNumber: 86,
        type: 'strength',
        title: '全身力量整合',
        description: '综合所有力量动作，进行全身训练',
        duration: '50分钟',
        exercises: [
          {
            id: 'ex99',
            name: '深蹲',
            sets: '5组',
            reps: '6-8次',
            intensity: '高强度',
            rest: '2分钟',
            tips: '保持正确姿势'
          },
          {
            id: 'ex100',
            name: '俯卧撑',
            sets: '5组',
            reps: '8-10次',
            intensity: '高强度',
            rest: '90秒',
            tips: '尽量降低身体'
          },
          {
            id: 'ex101',
            name: '哑铃划船',
            sets: '5组',
            reps: '8-10次/侧',
            intensity: '高强度',
            rest: '90秒',
            tips: '保持背部挺直'
          },
          {
            id: 'ex102',
            name: '平板支撑',
            sets: '3组',
            reps: '180秒',
            intensity: '高强度',
            rest: '60秒',
            tips: '保持稳定'
          }
        ]
      },
      {
        id: 'day87',
        dayNumber: 87,
        type: 'rest',
        title: '休息日',
        description: '完全休息，让身体恢复',
        duration: '0分钟'
      },
      {
        id: 'day88',
        dayNumber: 88,
        type: 'aerobic',
        title: '长时间有氧',
        description: '最后一次长时间有氧训练',
        duration: '60分钟',
        exercises: [
          {
            id: 'ex103',
            name: '超长爬坡',
            sets: '1组',
            reps: '60分钟',
            intensity: '中等强度（心率65-75%最大心率）',
            rest: '无',
            tips: '保持稳定，享受过程'
          }
        ]
      },
      {
        id: 'day89',
        dayNumber: 89,
        type: 'activeRecovery',
        title: '轻松活动',
        description: '轻松活动，为最后一天做准备',
        duration: '20分钟'
      },
      {
        id: 'day90',
        dayNumber: 90,
        type: 'strength',
        title: '最终测试',
        description: '测试三个月的训练成果',
        duration: '60分钟',
        exercises: [
          {
            id: 'ex104',
            name: '综合挑战',
            sets: '1组',
            reps: '60分钟',
            intensity: '中等强度',
            rest: '无',
            tips: '结合所有学过的动作，展示三个月的进步'
          }
        ]
      }
    ]
  }
];

// 获取当前日期在计划中的进度
const getCurrentProgress = () => {
  // 简单模拟进度，实际应用中可以使用真实日期计算
  const startDate = new Date('2025-09-01');
  const currentDate = new Date();
  const diffTime = Math.abs(currentDate.getTime() - startDate.getTime());
  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
  
  // 限制在90天内
  return Math.min(diffDays, 90);
};

export default function ThreeMonthFitnessPlan() {
  const { theme } = useTheme();
  const [activePhase, setActivePhase] = useState<string>('phase1');
  const [expandedCycle, setExpandedCycle] = useState<string | null>(null);
  const [expandedDay, setExpandedDay] = useState<string | null>(null);
  const [completedDays, setCompletedDays] = useState<Set<string>>(new Set());
  const navigate = useNavigate();
  
  // 获取当前进度
  const currentProgress = getCurrentProgress();
  
  // 从本地存储加载完成的日期
  useEffect(() => {
    const savedCompletedDays = localStorage.getItem('completedDays');
    if (savedCompletedDays) {
      setCompletedDays(new Set(JSON.parse(savedCompletedDays)));
    }
  }, []);
  
  // 保存完成的日期到本地存储
  useEffect(() => {
    localStorage.setItem('completedDays', JSON.stringify(Array.from(completedDays)));
  }, [completedDays]);
  
  // 切换周期展开/折叠
  const toggleCycle = (cycleId: string) => {
    setExpandedCycle(expandedCycle === cycleId ? null : cycleId);
  };
  
  // 切换训练日展开/折叠
  const toggleDay = (dayId: string) => {
    setExpandedDay(expandedDay === dayId ? null : dayId);
  };
  
  // 切换训练日完成状态
  const toggleDayCompleted = (dayId: string, e: React.MouseEvent) => {
    e.stopPropagation();
    const newCompletedDays = new Set(completedDays);
    if (newCompletedDays.has(dayId)) {
      newCompletedDays.delete(dayId);
    } else {
      newCompletedDays.add(dayId);
    }
    setCompletedDays(newCompletedDays);
    toast(
      newCompletedDays.has(dayId) 
        ? '太棒了！已标记为完成' 
        : '已取消完成标记'
    );
  };
  
  // 获取训练日类型对应的样式和图标
  const getDayTypeInfo = (type: string) => {
    switch(type) {
      case 'aerobic':
        return { 
          color: 'bg-blue-100 dark:bg-blue-900/50', 
          icon: <Heart size={16} className="text-blue-600 dark:text-blue-400" />,
          text: '有氧训练'
        };
      case 'strength':
        return { 
          color: 'bg-green-100 dark:bg-green-900/50', 
          icon: <Dumbbell size={16} className="text-green-600 dark:text-green-400" />,
          text: '力量训练'
        };
      case 'activeRecovery':
        return { 
          color: 'bg-yellow-100 dark:bg-yellow-900/50', 
          icon: <Users size={16} className="text-yellow-600 dark:text-yellow-400" />,
          text: '主动恢复'
        };
      case 'rest':
        return { 
          color: 'bg-slate-100 dark:bg-slate-700', 
          icon: <Calendar size={16} className="text-slate-600 dark:text-slate-400" />,
          text: '休息日'
        };
      default:
        return { 
          color: 'bg-slate-100 dark:bg-slate-700', 
          icon: <Clock size={16} className="text-slate-600 dark:text-slate-400" />,
          text: '训练'
        };
    }
  };
  
  // 计算完成进度百分比
  const progressPercentage = Math.round((currentProgress / 90) * 100);
  
  // 获取当前阶段
  const currentPhase = trainingPhases.find(phase => {
    if (phase.id === 'phase1') return currentProgress <= 30;
    if (phase.id === 'phase2') return currentProgress > 30 && currentProgress <= 60;
    return currentProgress > 60;
  });
  
  // 过滤当前阶段的周期
  const filteredCycles = trainingCycles.filter(cycle => cycle.phaseId === activePhase);

  return (
    <div className={`min-h-screen flex flex-col ${theme === 'dark' ? 'dark bg-slate-900 text-white' : 'bg-white text-slate-900'}`}>
      {/* 导航栏 */}
      <header className="sticky top-0 z-40 bg-white/90 dark:bg-slate-900/90 backdrop-blur-md shadow-md">
        <div className="container mx-auto px-4 py-4 flex items-center">
          <button 
            onClick={() => navigate(-1)} 
            className="mr-4 p-2 rounded-full hover:bg-slate-100 dark:hover:bg-slate-800 transition-colors"
          >
            <ArrowLeft size={20} />
          </button>
          <h1 className="text-xl font-bold bg-gradient-to-r from-blue-600 to-green-500 bg-clip-text text-transparent">
            3个月健身计划
          </h1>
        </div>
      </header>

      <main className="flex-grow">
        {/* 进度概览 */}
        <section className="py-8 bg-gradient-to-br from-blue-50 via-white to-green-50 dark:from-blue-900/30 dark:via-slate-900 dark:to-green-900/30">
          <div className="container mx-auto px-4">
            <div className="max-w-5xl mx-auto">
              <div className="flex flex-col md:flex-row items-center justify-between mb-8">
                <div className="text-center md:text-left mb-6 md:mb-0">
                  <h2 className="text-2xl md:text-3xl font-bold mb-2">
                    {currentPhase?.title}
                  </h2>
                  <p className="text-slate-600 dark:text-slate-300">
                    第 {currentProgress} 天 / 共 90 天 | {progressPercentage}% 完成
                  </p>
                </div>
                <div className="bg-white dark:bg-slate-800 rounded-full p-1 shadow-md">
                  <div 
                    className="bg-gradient-to-r from-blue-600 to-green-500 h-3 rounded-full"
                    style={{ width: `${progressPercentage}%` }}
                  ></div>
                </div>
              </div>
              
              {/* 阶段说明卡片 */}
              <div className="bg-white dark:bg-slate-800 rounded-2xl p-6 shadow-lg">
                <div className="flex flex-col md:flex-row items-center">
                  <div className={`w-16 h-16 rounded-full bg-gradient-to-br ${currentPhase?.color} flex items-center justify-center mr-6 shrink-0`}>
                    {currentPhase?.icon}
                  </div>
                  <div>
                    <h3 className="text-xl font-semibold mb-2">{currentPhase?.title}</h3>
                    <p className="text-slate-600 dark:text-slate-300 mb-4">{currentPhase?.description}</p>
                    <div className="flex flex-wrap gap-2">
                      <span className="px-3 py-1 bg-blue-100 dark:bg-blue-900/50 rounded-full text-sm">
                        {currentPhase?.focus}
                      </span>
                      <span className="px-3 py-1 bg-green-100 dark:bg-green-900/50 rounded-full text-sm">
                        {currentPhase?.duration}
                      </span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>

        {/* 训练阶段选择 */}
        <section className="py-10">
          <div className="container mx-auto px-4">
            <div className="flex overflow-x-auto pb-4 mb-8 gap-2 md:flex-wrap md:justify-center">
              {trainingPhases.map((phase) => (
                <button
                  key={phase.id}
                  onClick={() => setActivePhase(phase.id)}
                  className={`px-4 py-2 rounded-full whitespace-nowrap transition-all duration-300 flex items-center ${
                    activePhase === phase.id
                      ? `bg-gradient-to-r ${phase.color} text-white shadow-lg`
                      : 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-700'
                  }`}
                >
                  <div className="mr-2">{phase.icon}</div>
                  <span>{phase.title}</span>
                </button>
              ))}
            </div>
          </div>
        </section>

        {/* 时间线训练计划 */}
        <section className="py-10 bg-slate-50 dark:bg-slate-800/50">
          <div className="container mx-auto px-4">
            <div className="max-w-4xl mx-auto">
              <h2 className="text-2xl font-bold mb-8 text-center">训练周期详情</h2>
              
              <div className="space-y-8">
                {filteredCycles.map((cycle) => (
                  <div key={cycle.id} className="relative">
                    {/* 周期标题 */}
                    <div 
                      className="bg-white dark:bg-slate-800 rounded-xl p-5 shadow-lg cursor-pointer transition-all duration-300 hover:shadow-xl"
                      onClick={() => toggleCycle(cycle.id)}
                    >
                      <div className="flex items-center justify-between">
                        <div className="flex items-center">
                          <div className="w-10 h-10 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mr-4">
                            <span className="font-bold text-blue-600 dark:text-blue-400">{cycle.cycleNumber}</span>
                          </div>
                          <div>
                            <h3 className="text-lg font-semibold">{cycle.theme}</h3>
                            <p className="text-sm text-slate-500 dark:text-slate-400">
                              第 {cycle.days[0]}-{cycle.days[cycle.days.length - 1]} 天 | {cycle.focus}
                            </p>
                          </div>
                        </div>
                        <ChevronRight 
                          size={20} 
                          className={`transition-transform duration-300 ${
                            expandedCycle === cycle.id ? 'rotate-90' : ''
                          }`}
                        />
                      </div>
                    </div>
                    
                    {/* 周期详情 - 时间线 */}
                    {expandedCycle === cycle.id && (
                      <div className="ml-5 mt-6 space-y-4">
                        {cycle.trainingDays.map((day, index) => {
                          const dayTypeInfo = getDayTypeInfo(day.type);
                          const isCurrentDay = day.dayNumber === currentProgress;
                          const isCompleted = completedDays.has(day.id);
                          
                          return (
                            <div key={day.id} className="relative">
                              {/* 时间线连接线 */}
                              {index < cycle.trainingDays.length - 1 && (
                                <div className="absolute top-5 bottom-0 left-5 w-0.5 bg-slate-200 dark:bg-slate-700 -ml-px z-0"></div>
                              )}
                              
                              {/* 训练日卡片 */}
                              <div 
                                className={`ml-10 bg-white dark:bg-slate-800 rounded-xl p-4 shadow-md transition-all duration-300 hover:shadow-lg ${
                                  isCurrentDay ? 'ring-2 ring-blue-500 dark:ring-blue-400' : ''
                                }`}
                                onClick={() => toggleDay(day.id)}
                              >
                                {/* 时间线节点 */}
                                <div className={`absolute left-0 top-4 w-10 h-10 rounded-full ${dayTypeInfo.color} flex items-center justify-center -ml-5 z-10`}>
                                  {dayTypeInfo.icon}
                                </div>
                                
                                <div className="flex items-center justify-between">
                                  <div>
                                    <div className="flex items-center">
                                      <h4 className="font-medium mr-2">{day.title}</h4>
                                      {isCurrentDay && (
                                        <span className="px-2 py-0.5 bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 text-xs rounded-full">
                                          今天
                                        </span>
                                      )}
                                    </div>
                                    <p className="text-sm text-slate-500 dark:text-slate-400">
                                      第 {day.dayNumber} 天 | {day.duration} | {dayTypeInfo.text}
                                    </p>
                                  </div>
                                  
                                  <div className="flex items-center gap-3">
                                    {/* 完成按钮 */}
                                    <button 
                                      onClick={(e) => toggleDayCompleted(day.id, e)}
                                      className={`w-8 h-8 rounded-full flex items-center justify-center transition-colors ${
                                        isCompleted 
                                          ? 'bg-green-100 dark:bg-green-900/50 text-green-600 dark:text-green-400' 
                                          : 'bg-slate-100 dark:bg-slate-700 text-slate-500 dark:text-slate-400 hover:bg-slate-200 dark:hover:bg-slate-600'
                                      }`}
                                      aria-label={isCompleted ? '标记为未完成' : '标记为完成'}
                                    >
                                      {isCompleted && <CheckCircle size={18} />}
                                    </button>
                                    
                                    {/* 展开/折叠按钮 */}
                                    <ChevronRight 
                                      size={18} 
                                      className={`transition-transform duration-300 ${
                                        expandedDay === day.id ? 'rotate-90' : ''
                                      }`}
                                    />
                                  </div>
                                </div>
                                
                                {/* 训练日详情 */}
                                {expandedDay === day.id && (
                                  <div className="mt-4 pt-4 border-t border-slate-200 dark:border-slate-700">
                                    <p className="text-slate-600 dark:text-slate-300 mb-4">
                                      {day.description}
                                    </p>
                                    
                                    {day.exercises && day.exercises.length > 0 && (
                                      <div className="space-y-3">
                                        <h5 className="font-medium">训练内容：</h5>
                                        {day.exercises.map((exercise) => (
                                          <div key={exercise.id} className="bg-slate-50 dark:bg-slate-700/50 p-3 rounded-lg">
                                            <div className="flex flex-wrap items-center justify-between mb-2">
                                              <h6 className="font-medium">{exercise.name}</h6>
                                              <span className="text-xs px-2 py-1 bg-blue-100 dark:bg-blue-900/50 text-blue-600 dark:text-blue-400 rounded-full">
                                                {exercise.intensity}
                                              </span>
                                            </div>
                                            <div className="grid grid-cols-2 sm:grid-cols-4 gap-2 text-sm">
                                              <div className="flex items-center">
                                                <span className="text-slate-500 dark:text-slate-400 mr-1">组数：</span>
                                                <span>{exercise.sets}</span>
                                              </div>
                                              <div className="flex items-center">
                                                <span className="text-slate-500 dark:text-slate-400 mr-1">次数：</span>
                                                <span>{exercise.reps}</span>
                                              </div>
                                              <div className="flex items-center">
                                                <span className="text-slate-500 dark:text-slate-400 mr-1">间歇：</span>
                                                <span>{exercise.rest}</span>
                                              </div>
                                            </div>
                                            {exercise.tips && (
                                              <p className="mt-2 text-xs text-slate-600 dark:text-slate-300">
                                                <i className="fa-solid fa-lightbulb mr-1 text-yellow-500"></i>
                                                {exercise.tips}
                                              </p>
                                            )}
                                          </div>
                                        ))}
                                      </div>
                                    )}
                                  </div>
                                )}
                              </div>
                            </div>
                          );
                        })}
                      </div>
                    )}
                  </div>
                ))}
              </div>
            </div>
          </div>
        </section>
        
        {/* 训练建议 */}
        <section className="py-12">
          <div className="container mx-auto px-4">
            <div className="max-w-3xl mx-auto">
              <h2 className="text-2xl font-bold mb-8 text-center">训练小贴士</h2>
              
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <BarChart size={20} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h3 className="font-semibold mb-2">循序渐进</h3>
                  <p className="text-sm text-slate-600 dark:text-slate-300">
                    按照计划逐步增加训练强度，不要急于求成，避免受伤。每完成一个周期，可以适当调整休息时间。
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <Heart size={20} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h3 className="font-semibold mb-2">注意饮食与恢复</h3>
                  <p className="text-sm text-slate-600 dark:text-slate-300">
                    保证充足的蛋白质摄入和水分补充，训练后及时拉伸放松，每晚保证7-9小时的优质睡眠。
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <Award size={20} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h3 className="font-semibold mb-2">保持一致性</h3>
                  <p className="text-sm text-slate-600 dark:text-slate-300">
                    坚持按照计划训练是成功的关键。即使偶尔错过训练，也不要气馁，尽快回到计划中来。
                  </p>
                </div>
                
                <div className="bg-white dark:bg-slate-800 rounded-xl p-6 shadow-md">
                  <div className="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/50 flex items-center justify-center mb-4">
                    <Users size={20} className="text-blue-600 dark:text-blue-400" />
                  </div>
                  <h3 className="font-semibold mb-2">记录进步</h3>
                  <p className="text-sm text-slate-600 dark:text-slate-300">
                    定期记录体重、围度变化和训练感受，这有助于你了解自己的进步，调整训练计划。
                  </p>
                </div>
              </div>
            </div>
          </div>
        </section>
      </main>

      {/* 页脚 */}
      <footer className="bg-slate-900 text-white py-6">
        <div className="container mx-auto px-4 text-center">
          <p className="text-slate-400 text-sm">
            © {new Date().getFullYear()} FitMaster 3个月健身计划 | 专业健身知识教学平台
          </p>
        </div>
      </footer>
    </div>
  );
}